<template>
    <el-table-column
        v-if="item.type === 'checkbox' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        type="selection"
        :width="item.width ? item.width : ''"
        :align="item.align || 'center'"
    ></el-table-column>
    <el-table-column
        v-if="item.type === 'sortIndex' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label || '序号'"
        :align="item.align || 'center'"
        :width="item.width ? item.width : '60px'"
        v-bind="item"
    >
        <template v-slot:default="scope">
            <span>
                {{ scope.$index + 1 }}
            </span>
        </template>
    </el-table-column>
    <!-- v-bind="item" 会影响表格树组件的收缩 -->
    <el-table-column
        v-if="(!item.type || item.type === 'text') && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label"
        :prop="item.prop"
        :align="item.align || 'center'"
        :width="item.width ? item.width : ''"
        :min-width="item.minWidth ? item.minWidth : ''"
        :show-overflow-tooltip="item.tooltipOptions ? item.tooltipOptions : (item.ellipsis || false) "
        :fixed="item.fixed ? item.fixed : false"
        :sortable="item.sortable || false"
    >
        <template v-slot:header>
            <slot v-if="item.headerSlot" name="elTableHeader"></slot>
        </template>
        <template v-slot:default="scope">
            <span>{{ scope.row[item.prop] ?? (item.replaceValue || "-") }}</span>
        </template>
    </el-table-column>
    <el-table-column
        v-if="item.type === 'date' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label"
        :prop="item.prop"
        :align="item.align || 'center'"
        :width="item.width ? item.width : ''"
        :min-width="item.minWidth ? item.minWidth : ''"
        :show-overflow-tooltip="item.tooltipOptions ? item.tooltipOptions : (item.ellipsis || false) "
        :sortable="item.sortable || false"
        v-bind="item"
    >
        <template v-slot:default="scope">
            <span>{{ getDate(scope.row[item.prop], item.format || "") }}</span>
        </template>
    </el-table-column>
    <!-- element的el-table-column下面，不能同时写el-table-column和#default -->
    <el-table-column
        v-if="item.type === 'slot' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label"
        :prop="item.prop"
        :align="item.align || 'center'"
        :width="item.width ? item.width : ''"
        :min-width="item.minWidth ? item.minWidth : ''"
        :show-overflow-tooltip="item.tooltipOptions ? item.tooltipOptions : (item.ellipsis || false) "
        v-bind="item"
    >
        <template v-slot:default="scope">
            <div :class="['slot-box', item.class ? item.class : '']">
                <slot :name="item.slotName" :data="{ scope, item }"></slot>
            </div>
        </template>
    </el-table-column>
    <slot v-if="item.type === 'customOperate'" name="elTableColumn"></slot>
    <el-table-column
        v-if="item.type === 'operate' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label"
        :align="item.align || 'center'"
        :width="item.width ? item.width : ''"
        :min-width="item.minWidth ? item.minWidth : ''"
        :fixed="item.fixed || 'right'"
        v-bind="item"
    >
        <template v-slot:default="scope">
            <div
                :class="[!item.hideSeparate ? 'operate-box' : '']"
                style="text-align:center;"
            >
                <template
                    v-for="operateItem in item.operateOptions"
                    :key="operateItem.btnName || operateItem.buttonName"
                >
                    <el-button
                        v-if="operateItem.isHide ? false :
                            operateItem.isHideFn ? operateItem.isHideFn(scope.row, item, operateItem) : true "
                        :type="operateItem.btnType || operateItem.buttonType || 'default'"
                        :size="operateItem.btnSize || operateItem.buttonSize || 'default'"
                        :disabled="operateItem.disabled || (operateItem.isDisabled && operateItem.isDisabled(scope.row, item))"
                        @click.stop="
                            (operateItem.btnClick && operateItem.btnClick(scope.row, item, scope, operateItem)) || 
                            (operateItem.buttonEvent && operateItem.buttonEvent(scope.row, item, scope, operateItem))
                        "
                        v-bind="operateItem"
                    >
                        <template v-slot:icon v-if="operateItem.iconfontClass">
                            <i :class="['iconfont',operateItem.iconfontClass]"></i>
                        </template>
                        {{ operateItem.btnName || operateItem.buttonName || "按钮" }}
                    </el-button>
                </template>
                <template v-if="item.moreOperateOptions && item.moreOperateOptions.length > 0">
                    <el-dropdown>
                        <span class="el-dropdown-link">更多<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
                        <template #dropdown>
                            <el-dropdown-item
                                v-for="moreOperateItem in item.moreOperateOptions"
                                :key="moreOperateItem.btnName || moreOperateItem.buttonName"
                            >
                                <el-button
                                    v-if="moreOperateItem.isHide ? false :
                                        moreOperateItem.isHideFn ? moreOperateItem.isHideFn(scope.row, item, moreOperateItem) : true "
                                    :type="moreOperateItem.btnType || moreOperateItem.buttonType || 'default'"
                                    :size="moreOperateItem.btnSize || moreOperateItem.buttonSize || 'default'"
                                    :disabled="moreOperateItem.disabled || (moreOperateItem.isDisabled && moreOperateItem.isDisabled(scope.row, item))"
                                    @click.stop="
                                        (moreOperateItem.btnClick && moreOperateItem.btnClick(scope.row, item, scope, moreOperateItem) )||
                                        (moreOperateItem.buttonEvent && moreOperateItem.buttonEvent(scope.row, item, scope, moreOperateItem))
                                    "
                                    v-bind="moreOperateItem"
                                >
                                    <template v-slot:icon v-if="moreOperateItem.iconfontClass">
                                        <i :class="['iconfont',moreOperateItem.iconfontClass]"></i>
                                    </template>
                                    {{ moreOperateItem.btnName || moreOperateItem.buttonName || "按钮" }}
                                </el-button>
                            </el-dropdown-item>
                        </template>
                    </el-dropdown>
                </template>
            </div>
        </template>
    </el-table-column>
    <el-table-column v-if="item.isShowExpandTooltip" type="expand" width="1">
        <template v-slot:default="scope">
            <span>
                {{ item.expandTooltipFn && item.expandTooltipFn(scope.row, item) }}
            </span>
        </template>
    </el-table-column>
    <el-table-column
        v-if="item.type === 'multiple' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label"
        :align="item.align || 'center'"
    >
        <template 
            v-for="(childItem,childIndex) in item.children"
            :key=" childItem.label+childIndex || 'column-item-'+childIndex "
        >
            <TableColumn :item="childItem"></TableColumn>
        </template>
    </el-table-column>
</template>

<script setup>
import {defineOptions,ref,computed} from "vue";
import Qilin from "qilin-utils";

defineOptions({
    name:"TableColumn"
});

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
// 接收来自父组件的传参
const propsValue=defineProps({
    item:{
        type:Object,
        default(){
            return {};
        }
    }
});

// 组件计算属性方法
const getDate = computed(() => {
    return function (date, format) {
        if (!date) {
            return "-";
        } else {
            return Qilin.Date.formatDate(date, format);
        };
    };
});


/*
    逻辑脚本代码区域
*/


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
// .tableColumn{

// }
</style>
